<template>
    <div class="list">
      <div class="shop" v-for="(item,index) in list" :key="index">
          <div class="imgbox">
              <img :src="item.pic" alt="">
          </div>
          <div class="text">
              <div class="name">{{item.name}}</div>
              <span class="saled">￥{{item.saled}} </span>
              <span class="shopping" @click="qiang(item,index)">{{item.msq?'已抢':'马上抢'}}</span>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668240950&t=a5e75c663474fbf7b874b9e7a9324adf';
  export default {
      data(){
          return {
              list:[
                  {pic,name:'买一送一明星皇堡 | 用心火烤肉质紧实 鲜嫩多汁 爆爆团',saled:25,msq:false},
                  {pic,name:'华莱士 | 聚划算单人套餐 | 进店必选',saled:12,msq:false},
                  {pic,name:'白老大小米果仁酥220g【 爆爆团 】',saled:19,msq:false},
                  {pic,name:'蜜雪冰城 | 蜜桃四季春 | 进店必点 给你更多甜蜜',saled:10,msq:false},
              ]
          }
      },
      methods:{
        qiang(item,index){
            item.msq=true;
            // console.log(123);
        }
      }
  }
  </script>
  
  <style lang='scss' scoped>
  .list .shop{
      margin: 10px;
      display: flex;
  }
  .list .shop .imgbox{
      width: 80px;
      margin-right: 10px;
  }
  .list .shop .imgbox img{
      width: 100%;
  }
  .list .shop .text{
      flex: 1;
      font-size: 17px;
      font-weight: bolder;
  }
  .list .shop .text .name{
      font-weight: bold;
  }
  .list .shop .text .saled{
    margin-top: 12px;
    font-size: 20px;
    color: orangered;
    // margin-right: 120px;
  }
  .list .shop .text .shopping{
    margin-top: 12px;
    font-size: 15px;
    color: white;
    margin-right: 10px;
    background-color: orangered;
    border-radius: 8px;
    margin-left: 140px;
  }
  </style>